import { h, Component, Fragment } from 'preact';
import { Router } from 'preact-router';

import Header from './Header';
import PMedia from './PMedia';

// Code-splitting is automated for routes
import Home from '../routes/home';
import Msg from '../routes/msg';
import About from '../routes/aboutme';
import Study from '../routes/study';
import TimeBox from '../routes/timebox';
import Plugins from '../routes/plugins';
import Pics from '../routes/pics';
// import Profile  from '../routes/profile';

export default class App extends Component {
	
	/** Gets fired when the route changes.
	 *	@param {Object} event		"change" event from [preact-router](http://git.io/preact-router)
	 *	@param {string} event.url	The newly routed URL
	 */
	handleRoute = e => {
		this.currentUrl = e.url;
	};

	componentDidMount(){
	}

	render() {
		return (
			
			<div id="app" >
				<PMedia>
					{
						({ isMobile }) => (
							<Fragment>
								<Header isMobile={isMobile} />
								<Router onChange={this.handleRoute}>
									<Home path="/" />
									<About path="/about" />
									<TimeBox path="/timeline" />
									<Msg path="/msg" />
									<Study path="/study" />
									<Pics path="/pics" />
									<Plugins path="/plugins" /> 
								</Router>
							</Fragment>
						)
					}
				</PMedia>
				
			</div>
		);
	}
}
